@import '../../../../variables';

:host {
  display: block;
}

.summary-table {
  width: 100%;

  @include darkTheme {
    background: $dark-theme-bg-lighter;
  }

  tr {
    height: 36px !important;
  }

  td {
    text-align: center;

    @include lightTheme() {
      color: $light-theme-text-color-muted;
    }
    @include darkTheme {
      color: $dark-theme-text-color-muted;
    }

    inline-input {
      @include lightTheme() {
        color: $light-theme-text-color;
      }
      @include darkTheme {
        color: $dark-theme-text-color;
      }
    }
  }

  th {
    text-align: center;
  }

  th,
  td {
    min-width: 50px;
  }

  td:first-child {
    text-align: start;
    min-width: 220px;
  }

  .cdk-column-timeSpentToday ::ng-deep .inline-input-wrapper {
    padding: $s;

    input {
      width: 100px;
    }
  }
}

.check-done {
  opacity: 0.5;

  &:hover {
    opacity: 1 !important;
  }

  .check,
  .undo {
    opacity: 0;
  }

  .undo {
    margin-right: -24px;
  }

  &:focus,
  &:hover {
    mat-icon {
      animation: $transition-duration-m success-btn-ani linear;
    }

    .check {
      opacity: 1;
    }
  }

  &.isDone {
    .check {
      opacity: 1;
    }

    &:hover {
      .check {
        opacity: 0;
      }

      .undo {
        opacity: 1;
      }
    }
  }
}

.repeat-task-icon {
  vertical-align: middle;
  margin-right: 4px;
  transform: rotate(45deg);
  opacity: 0.7;
}

.task-title {
  display: flex;
  //border: 1px solid orange;
  text-align: start;
  align-items: center;

  &.isDone ::ng-deep .value-wrapper {
    text-decoration: line-through;
  }

  &.isSubTask {
    font-style: italic;
  }

  > span {
    text-decoration: none !important;
    display: block;
    padding-left: $s * 1;
  }

  inline-input {
    flex-grow: 1;
    text-align: start;
    display: block;
  }

  ::ng-deep .inline-input-wrapper {
    padding: $s;

    input {
      width: 100%;
      text-align: start;
    }
  }
}
